<template>
	<view class="container">
		<TopBtn :title="'问诊详情'"></TopBtn>
		<view class="info">
			<view class="currency_card">
				<view class="state">
					{{ data.statusName }}
				</view>
				<view class="currency_title">
					问诊信息
					<small style="margin-left: 30rpx; color: #999; font-size: 14px; font-weight: normal">
						{{ data.groupId }}
					</small>
				</view>
				<view class="currency_info">
					<view class="Card_row">
						<view class="title">问诊方式：</view>
						<view class="">
							{{ data.consultationMethodName }}
						</view>
					</view>
					<view class="Card_row">
						<view class="title">问诊来源：</view>
						<view :class="data.consultationSource == 2 ? 'zjlx' : 'ptlx'">
							{{ data.consultationSourceName }}
						</view>
					</view>
					<view class="Card_row alignItems" v-if="data.doctorId != 0">
						<view class="title">问诊医生：</view>
						<view class="">
							<doctorCard :data="data"></doctorCard>
						</view>
					</view>
					<view class="Card_row" v-if="data.adress">
						<view class="title">就诊地址：</view>
						<view class="">
							{{ data.adress }}
						</view>
					</view>
					<view class="Card_row">
						<view class="title">问诊编号：</view>
						<view class="">
							{{ data.no }}
						</view>
					</view>
					<view class="Card_row">
						<view class="title">提交时间：</view>
						<view class="">
							<uni-dateformat :date="data.createTime" format="yyyy-MM-dd hh:mm"></uni-dateformat>
						</view>
					</view>
				</view>
			</view>
			<patientCard :data="data"></patientCard>
			<view class="currency_card">
				<view class="currency_title">病情资料</view>
				<view class="flex-center-center">
					<DiseaseCondition v-if="data.consultationFormRespVO" :data="data.consultationFormRespVO"></DiseaseCondition>
					<image class="qxt" v-else src="@/static/DefaultGraph/bqzl.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="currency_card">
				<view class="currency_title">
					交易信息
				</view>
				<view class="currency_info">
					<view class="Card_row">
						<view class="title">
							付款金额：
						</view>
						<view class="red">
							￥100/2天
						</view>
					</view>
					<view class="Card_row">
						<view class="title">
							提交时间：
						</view>
						<view class="">
							2024-05-21 11:32
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="btnBoxTow" v-if="data.status === 1">
			<view class="cancel" v-if="data.havePublic==0" @click="RejectpopupOpen()">拒诊</view>
			<view class="cancel" v-if="data.havePublic==1" @click="updateOutpatientInfo()">忽略</view>
			<view class="confirm" @click="open()">接诊</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="yypupBox" v-if="data.consultationMethod == 2">
				<image src="@/static/ConsultationRoom/yylogo.png" mode=""></image>
				<view class="title">语音接诊</view>
				接诊后，请和患者约定语音时间并按时发起语音
				<view class="btnBox flex-sp-center">
					<view class="flex-center-center" @click="pupclose()">不了</view>
					<view class="add flex-center-center" @click="receiveOutpatientInfo()">去接诊</view>
				</view>
			</view>
			<view class="sppupBox" v-if="data.consultationMethod == 3">
				<image src="@/static/ConsultationRoom/splogo.png" mode=""></image>
				<view class="title">视频接诊</view>
				接诊后，请和患者约定语音时间并按时发起语音
				<view class="btnBox flex-sp-center">
					<view class="flex-center-center" @click="pupclose()">不了</view>
					<view class="add flex-center-center" @click="receiveOutpatientInfo()">去接诊</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="Rejectpopup" type="bottom">
			<view class="pupbox">
				<view class="title">
					<view class="close" @click="pupclose()">取消</view>
					拒绝原因
					<view class="add" @click="refuseOutpatientInfo()">确认</view>
				</view>
				<view class="">
					<textArea v-model="refuseReason" :inputNane="refuseReason" :maxNum="50"></textArea>
				</view>
			</view>
		</uni-popup>
		<view class="kong"></view>
	</view>
</template>

<script>
	import {
		addHoursToTimestamp
	} from '@/utils/time'
	import {
		CreateGroup,
		UpdateGroupProfile,
		SendGroupMessage
	} from '@/utils/TIM'
	import {
		updateOutpatientInfo
	} from '@/api/Outpatient'
	import {
		getOutpatientInfo,
		receiveOutpatientInfo,
		refuseOutpatientInfo,
	} from '@/api/ConsultationRoom'

	export default {
		data() {
			return {
				data: {},
				id: '',
				refuseReason: '',
			}
		},
		onShow() {
			this.getOutpatientInfo()
		},
		onLoad(e) {
			this.id = e.id
			this.getOutpatientInfo()
		},
		methods: {
			RejectpopupOpen() {
				this.$refs.Rejectpopup.open('bottom')
			},
			open() {
				if (this.data.consultationMethod == 1) {
					this.receiveOutpatientInfo()
				} else {
					this.$refs.popup.open('center')
				}
			},
			pupclose() {
				this.$refs.popup.close()
				this.$refs.Rejectpopup.close()
			},
			updateOutpatientInfo(){
				updateOutpatientInfo({
					id: this.id,
					ignoreOut: 1, // 接诊时间
				}).then(res => {
					uni.showToast({
						title: '操作成功',
						duration: 2000,
						icon: 'none',
					})
					uni.$emit('show', true)
					uni.navigateBack({
						delta: 1, //返回层数，2则上上页
					})
				})
			},
			refuseOutpatientInfo() {
				if (!this.refuseReason) {
					uni.showToast({
						title: '请填写原因',
						duration: 2000,
						icon: 'none',
					})
					return
				}
				refuseOutpatientInfo({
					id: this.id,
					status: '5',
					refuseReason: this.refuseReason,
				}).then(res => {
					uni.showToast({
						title: '操作成功',
						duration: 2000,
						icon: 'none',
					})
					uni.$emit('show', true)
					uni.navigateBack({
						delta: 1, //返回层数，2则上上页
					})
					this.getOutpatientInfo(this.id)
					this.pupclose()
				})
			},
			
			receiveOutpatientInfo() {
				// 创建会话
				// this.handleCreateConversation(this.data)

				receiveOutpatientInfo({
					id: this.id,
					status: 2,
					havePublic: 0,
				}).then(res => {
					uni.showToast({
						title: '操作成功',
						duration: 2000,
						icon: 'none',
					})
					this.pupclose()

					// 创建会话
					this.handleCreateConversation(this.data)

					// 跳转
					// uni.redirectTo({
					//   url: `/pages/ConsultationRoom/GoConsultation/GoConsultation?id=${this.id}`,
					// })
				})
			},
			getOutpatientInfo() {
				if (!this.id) return

				getOutpatientInfo({
					id: this.id,
				}).then(res => {
					this.data = res.data
				})
			},
			// 创建会话
			async handleCreateConversation(e) {
				const memberList = [{
					userID: String(e.openId),
					userName: e.patientName,
				}, ]

				// 创建群组
				console.log('--memberList---------------------------------------', memberList)
				const newGroup = await CreateGroup(
					memberList,
					'问诊',
					`${e.patientName}(患者)和${e.doctorName}(医生)的问诊`
				)
				console.log('--newGroup---------------------------------------', newGroup.data)

				const {
					groupID
				} = newGroup.data.group

				// 发送群消息
				const message = {
					businessID: 'tip',
					type: 'highlight', // default | highlight | card | topbar |
					text: '医生已接诊，交流通道已开启，最长交流时长为48小时，请医患及时进行问诊',
				}
				SendGroupMessage(groupID, message)

				// 计算群组会话结束时间
				const startTime = Date.now()
				const endTime = addHoursToTimestamp(startTime, 48)

				// 问诊信息中增加 groupID
				await updateOutpatientInfo({
					id: this.id,
					groupId: groupID, // 群组ID
					receiveTime: startTime, // 接诊时间
				})

				// 组织会话信息
				const consultationInfo = {
					id: e.id,
					consultationMethod: e.consultationMethod,
					departName: e.departName,
					hospitalName: e.hospitalName,
					doctorId: e.doctorId,
					doctorName: e.doctorName,
					patientId: e.patientId,
					patientName: e.patientName,
					groupId: groupID,
					status: e.status,
				}

				// 更新群组信息：会话结束时间
				console.log('--endTime--------------------------------------->', startTime, endTime)
				await UpdateGroupProfile(groupID, {
					avatar: 'https://mms0.baidu.com/it/u=463746039,706527407&fm=253&app=138&f=JPEG?w=500&h=543',
					groupCustomField: [{
							key: 'endTime',
							value: String(endTime),
						},
						{
							key: 'consultation',
							value: JSON.stringify(consultationInfo),
						},
					],
				})
			},
		},
	}
</script>

<style lang="less">
	.pupbox {
		width: 750rpx;
		height: 522rpx;
		background: #ffffff;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		padding: 30rpx 50rpx;
		box-sizing: border-box;
		background-size: 100% 100%;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.add {
				font-weight: 500;
				font-size: 28rpx;
				color: #3e6efe;
			}

			.close {
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
			}
		}

		.messageList {
			margin-top: 1em;

			margin-top: 1em;

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
			}

			.messageinfo {
				display: inline-block;
				width: 287rpx;
				height: 220rpx;
				border: 2px solid #eeeeee;
				border-radius: 15rpx;
				margin-right: 25rpx;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
				vertical-align: top;
			}

			.text {
				height: 100%;
				display: flex;
				align-items: center;
				white-space: wrap;
				white-space: pre-wrap;
				/* css-3 */
				white-space: -moz-pre-wrap;
				/* Mozilla, since 1999 */
				white-space: -pre-wrap;
				/* Opera 4-6 */
				white-space: -o-pre-wrap;
				/* Opera 7 */
				word-wrap: break-word;
				/* Internet Explorer 5.5+ */
			}

			.act {
				border: 4rpx solid #aa75fa;
				color: #7e67fd;
			}
		}

		// 多行文本输入框
		/deep/.uni-easyinput__content {
			border: none;
		}

		// 多行文本输入框
		/deep/.is-textarea {
			background-color: #f9f9f9 !important;
			margin: 23rpx 0 40rpx;
		}

		/deep/.is-input-border {
			border-radius: 20rpx;
		}

		/deep/.uni-easyinput__placeholder-class {
			font-size: 28rpx;
		}
	}

	.sppupBox {
		width: 559rpx;
		height: 428rpx;
		background-image: url(@/static/ConsultationRoom/spbg.png);
		background-size: 100% 100%;
		font-weight: 500;
		font-size: 28rpx;
		padding: 0 37rpx 47rpx;
		box-sizing: border-box;
		color: #999999;
		position: relative;

		image {
			width: 142rpx;
			height: 142rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -49rpx;
		}

		.title {
			padding-top: 114rpx;
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			text-align: center;
			margin-bottom: 28rpx;
		}

		.btnBox {
			margin-top: 37rpx;

			view {
				width: 232rpx;
				height: 83rpx;
				border-radius: 10rpx;
				color: #26ce8a;
				border: 2px solid #26ce8a;
			}

			.add {
				background: #26ce8a;
				color: #ffffff;
			}
		}
	}

	.yypupBox {
		width: 559rpx;
		height: 428rpx;
		background-image: url(@/static/ConsultationRoom/yybg.png);
		background-size: 100% 100%;
		font-weight: 500;
		font-size: 28rpx;
		padding: 0 37rpx 47rpx;
		box-sizing: border-box;
		color: #999999;
		position: relative;

		image {
			width: 142rpx;
			height: 142rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -49rpx;
		}

		.title {
			padding-top: 114rpx;
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			text-align: center;
			margin-bottom: 28rpx;
		}

		.btnBox {
			margin-top: 37rpx;

			view {
				width: 232rpx;
				height: 83rpx;
				border-radius: 10rpx;
				color: #f2b039;
				border: 2px solid #f2b039;
			}

			.add {
				background: #f2b039;
				color: #ffffff;
			}
		}
	}

	.info {
		padding: 30rpx;

		.currency_card {
			position: relative;

			.state {
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 5rpx;
				min-width: 100rpx;
				height: 50rpx;
				background: #f9fbfe;
				font-size: 28rpx;
				color: #3e6efe;
				text-align: center;
				line-height: 50rpx;
				border-radius: 0 21rpx;
			}
		}

		&>view {
			margin-bottom: 27rpx;
		}

		.currency_info {
			margin-top: 21rpx;

			&:last-child {
				margin-top: 0rpx;
			}

			.Card_row {
				display: flex;
				font-weight: 500;
				font-size: 28rpx;
				color: #333;
				align-items: center;
				min-height: 60rpx;

				.title {
					width: 150rpx;
					color: #999;
				}
			}

			.alignItems {
				align-items: self-start;
			}
		}
	}
</style>